<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <img src="pic/rose.jpg">

    <!-- <div id="cssdemo" style="font-size: 36px;">我是一个文本</div> -->
    <!-- 元素属性操作 -->
    <!-- <p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就业课</a></p> -->
    
    <!-- 元素操作 -->
    <!-- <div id="test"><span>我是一个div</span></div>

    <div id="test2"><span>我是一个div2</span></div>

    <input type="text" id="userName" value="zhangsan">

    <input type="button" value="点击我有惊喜" id="button"> -->



    <script src="js/jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> -->
    <script>
        //元素的删除
        $("ol").empty();  //清空ol元素的内容
        // $("ol").remove();  //ol标签及子标签全部删除



        //元素的插入
        // $("ol").append("<li>append</li>");
        // $("ol").prepend("<li>prepend</li>");

        // $("ol").after("<div>after</div>");
        // $("ol").before("<div>before</div>");


        //css操作
        // let fontSize = $("#cssdemo").css("font-size");  //取值
        // console.log(fontSize);

        // $("#cssdemo").css("font-size", "48px");//赋值


        //元素属性操作
        // $("p a").attr("href","www.baidu.com");
        // let hrefVal = $("p a").attr("href");
        // console.log(hrefVal);


        // 元素操作
        // $("#button").click(function () {
        //     $("#test").text("<h1>我是text方法</h1>");

        //     $("#test2").html("<h1>我是html方法</h1>");

        //     $("#userName").val("zhangsan update");
        // });



        // let text = $("#test").text();
        // console.log(text);

        // let html = $("#test").html();
        // console.log(html);

        // let inputVal = $("#userName").val();
        // console.log(inputVal);


        // $("#button").click(function(){
        //     $(this).hide();
        // });
    </script>
</body>

</html>